<html>
	<head>
		<script src="../../src/gears_init.js"></script>
		<script src="../../src/Norm.js"></script>
		<script src="../../src/Norm.Logger.Gears.js"></script>
		<script src="../../src/Norm.Database.Gears.js"></script>
		<script src="../../src/Norm.ResultIterator.Gears.js"></script>
		<script src="../../src/Norm.LastIdManager.js"></script>
		<script src="../../src/Norm.Events.js"></script>
		<script src="../../src/Norm.Sql.js"></script>
		<script src="../../src/Norm.Fields.js"></script>
		<script src="../../src/Norm.Model.js"></script>
		<script src="../../src/Norm.Introspection.js"></script>
		<script src="../../src/Norm.Transaction.js"></script>
		<script>
			Norm.Database.name = "demo.v2";
			var Company = new Norm.Model({
				name : "Company",
				fields : {
					name : new Norm.Fields.String({maxLength : 25}),
					people : new Norm.Fields.ManyToOne({related : "Person"})
				}
			})
			
			var Person = new Norm.Model({
				name : "Person",
				fields : {
					firstName : new Norm.Fields.String({maxLength : 25}),
					lastName : new Norm.Fields.String({maxLength : 25}),
					company : new Norm.Fields.OneToMany({related : "Company"})	
				}
			});
			
			Company.createTable();
			Person.createTable();
			
			function render() {
				
				var results = document.getElementById("results");
				var companies = document.getElementById("select_company");
				companies.innerHTML = results.innerHTML = "";
				Person.select().each(function(person) {
					var item = document.createElement("div");
					item.innerHTML = person.firstName + " - " + person.lastName + " - " + person.company.name;
					results.appendChild(item);
				});
				Company.select().each(function(company) {
					var item = document.createElement("option");
					item.innerHTML = company.name;
					item.value = company.rowid;
					companies.appendChild(item);
				});
			}
			
			function addPerson() {
				
				var firstName = document.getElementById("firstName").value;
				var lastName = document.getElementById("lastName").value;
				var companies = document.getElementById("select_company");
				var company_id = parseInt(companies.options[companies.selectedIndex].value);
				var person = new Person();
				person.firstName = firstName;
				person.lastName = lastName;
				person.company = company_id;
				person.save();
				render();
				return false;
			}
			
			function removePerson() {
				
				var firstName = document.getElementById("firstName").value;
				var lastName = document.getElementById("lastName").value;
				var companies = document.getElementById("select_company");
				var company_id = parseInt(companies.options[companies.selectedIndex].value);
				Person.remove("firstName = ? AND lastName = ? AND Company_id = ?", [firstName, lastName, company_id]);
				render();
				return false;
			}
			
			function addCompany() {
				
				var companyName = document.getElementById("companyName").value;
				var company = new Company();
				company.name = companyName;
				company.save();
				render();
				return false;
			}
			
			function removeCompany() {
				
				var companyName = document.getElementById("companyName").value;
				Company.remove("name = ?", [companyName]);
				return false;
			}
			
			window.onload = render;
		</script>
	</head>
	<body>
		<div id="results"></div>
		<div>
			<strong>Add or remove a person:</strong>
			<form>
				First Name: <input type="text" id="firstName" name="firstName" value=""/><br/>
				Last Name: <input type="text" id="lastName" name="lastName" value=""/><br/>
				Company: <select id="select_company" name="company"></select><br/>
				<input type="button" value="add person" onclick="return addPerson();" />
				<input type="button" value="remove person" onclick="return removePerson();" />
			</form>
			<strong>Add or remove a company:</strong>
			<form>
				Name: <input type="text" id="companyName" name="companyName" value=""/><br/>
				<input type="button" value="add company" onclick="return addCompany();" />
				<input type="button" value="remove company" onclick="return removeCompany();" />
			</form>
		</div>
	</body>
</html>
